<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>29_事件的类型</title>
    <link rel="stylesheet" href="./css/basic.css" />
    <style>
      .container,
      .container_02 {
        margin: 20px auto;
        width: 50vw;
        height: 200px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <input id="txtInput" type="text" />
    <div class="container_02">当前移动：</div>
    <div class="container" index="0">当前移动：</div>
    <div class="container" index="1">当前移动：</div>
    <div class="container" index="2">当前移动：</div>
    <script>
      document.querySelectorAll(".container").forEach((dom, index) => {
        // let count1,count2,count3 = 0
        let count1 = 0;
        let count2 = 0;
        let count3 = 0;
        dom.addEventListener("mousemove", (event) => {
          // 判断当前dom属于哪个块
          if (dom.getAttribute("index") === "0") {
            count1++;
            event.target.innerText = `当前移动：${count1}`; // 触发事件对象的本身
            event.target.style.color = "blue";
            // document.querySelector("div[index='0']").innerText = `当前移动：${count1}`
          } else if (dom.getAttribute("index") === "1") {
            count2++;
            event.target.innerText = `当前移动：${count2}`;
            event.target.style.color = "red";
            // document.querySelector("div[index='1']").innerText = `当前移动：${count2}`
          } else {
            count3++;
            event.target.innerText = `当前移动：${count3}`;
            event.target.style.color = "black";
            event.target.style.backgroundColor = "brown";
            // document.querySelector("div[index='2']").innerText = `当前移动：${count3}`
          }
        });
      });
      // document.querySelector("#txtInput").addEventListener("change", () => {
      //     alert(123)
      // })
      document.querySelector("#txtInput").addEventListener("input", () => {
        // alert(123)
      });
      document.querySelector("#txtInput").addEventListener("keyup", (event) => {
        // 判断回车按键
        if (event.key === "Enter") {
          alert("您按下了回车键");
        }
        if (event.keyCode === 13) {
          alert("您按下了回车键");
        }
      });
      document.querySelector("#txtInput").addEventListener("keydown", () => {
        //alert("按下")
      });
    </script>
  </body>
</html>
